<template>
	<view>
		<view class="tabs" :style="'filter: blur('+this.$store.state.mackNum+'px);'">
			
			<view @click="changeTwo()">
				<view class="tb" v-if="this.$store.state.num1==-1">
					<image style="width: 53rpx; height:53rpx" src="../static/icon/regi_icon/sy.png" mode=""></image>
					<view style="color: rgb(216,216,216);">首页</view>
				</view>
				<view class="tb" v-if="this.$store.state.num1==0">
					<image style="width: 53rpx; height:53rpx" src="../static/icon/gameicon/sy.png" mode=""></image>
					<view style="color: rgb(148,113,254);">首页</view>
				</view>
			</view>
			<view @click="changeThree()">
				<view class="tb" v-if="this.$store.state.num2==-1">
					<image style="width: 37rpx; height:43rpx" src="../static/icon/gameicon/zp1.png" mode=""></image>
					<view style="color: rgb(216,216,216);">幸运大转盘</view>
				</view>
				<view class="tb" v-if="this.$store.state.num2==0">
					<image style="width: 37rpx; height:43rpx" src="../static/icon/dzp.png" mode=""></image>
					<view style="color: rgb(148,113,254);">幸运大转盘</view>
				</view>
			</view>
			<view @click="changeOne()">
				<!-- 	<view style="width: 30rpx; height:45rpx;
			background-image: url('../static/icon/我的.png');
			background-position: 100%;
			background-size: 100%;">
			</view> -->
				<view class="tb" v-if="this.$store.state.num==-1">
					<image style="width: 30rpx; height:45rpx" src="../static/icon/my.png" mode=""></image>
					<view style="color: rgb(216,216,216);">我的</view>
				</view>
				<view class="tb" v-if="this.$store.state.num==0">
					<image style="width: 30rpx; height:45rpx" src="../static/icon/gameicon/xr.png" mode=""></image>
					<view style="color: rgb(148,113,254);">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapMutations} from 'vuex'
	export default {
		name: "TabBar",
		data() {
			return {
				// num: 0,
				// num1: -1,
				// num2: -1,
			};
		},
		methods: {
			...mapMutations(['changeOne','changeTwo','changeThree']),
			// changeOne() {
			// 	this.num = 0;
			// 	this.num1 = -1;
			// 	this.num2 = -1
			// 	// console.log(this.num);
			// 	uni.navigateTo({
			// 		url: '/pages/Mypage/stallOwner/stallOwner',
					
			// 	});
			// },
			// changeTwo() {
			// 	this.num = -1;
			// 	this.num1 = 0;
			// 	this.num2 = -1
			// 	// console.log(this.num);
			// 	// console.log(this.num1);
			// 	// console.log(this.num2);
			// 	uni.navigateTo({
			// 		url: '/pages/HomePage/PersonalCenter/PersonalCenter',
					
			// 	});
			// },
			// changeThree() {
			// 	this.num = -1;
			// 	this.num1 = -1;
			// 	this.num2 = 0
			// 	// console.log(this.num2);
			// 	uni.navigateTo({
			// 		url: '/pages/HomePage/Largeturntable/Largeturntable',
			// 	});
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		width: 100%;
		height: 150rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		justify-content: space-around;
		align-items: center;
	box-shadow: 0px 5px 50px #9e9e9e80; 
	.tb {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
		}
	}
</style>
